<script lang="ts" setup>
import useTheme from '@/src/stores/useTheme'
import useRecorder from './useRecorder'
import { Microphone, MicrophoneSlash } from '@vicons/fa'
const tab = ref('recorder')
const { microphoneAccess } = useRecorder({ container: '#recorder' })
</script>

<template>
  <div _nm="flat-q-primary-8">
    <div
      id="recorder"
      _pos="relative"
      _nm="convex-q-primary-7"
      _w="300px"
      _h="300px"
      _p="y-50px x-30px"
      _m="auto"
      _border="rounded-full"
      _transition="all duration-100"
      _transform="gpu"
      _filter="~"
      _active="nm-concave-q-primary-7 brightness-90 scale-98"
    >
      <component
        :is="microphoneAccess === 'granted' ? Microphone : MicrophoneSlash"
        _pos="absolute top-1/2 left-1/2"
        _transform="~ -translate-x-1/2 -translate-y-1/2"
        _z="1"
        _w="200px"
        _h="200px"
        _p="5px"
        _text="q-primary-5"
        _cursor="pointer"
        :style="{
          filter: `drop-shadow(2px 4px 6px ${useTheme().themeCss['primary-10']})`
        }"
      />
    </div>

    <div _m="t-auto 25px" _flex="~ justify-between">
      <div
        v-for="item in 5"
        :key="item"
        _nm="flat-q-primary-7-sm"
        _flex="~ center"
        _w="40px"
        _h="40px"
        _p="1px"
        _border="rounded-8px"
      >
        <div
          _nm="inset-q-primary-7-sm"
          _flex="~ center"
          _w="full"
          _h="full"
          _border="rounded-8px"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <!-- <q-tabs v-model="tab" dense narrow-indicator _space="x-5">
      <q-tab _nm="flat-q-primary-3" name="recorder" label="Recorder" />
      <q-tab _nm="flat-q-primary-3" name="test1" label="Test1" />
      <q-tab _nm="flat-q-primary-3" name="test2" label="Test2" />
    </q-tabs> -->
  </div>
</template>
